<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="renderer" content="webkit">
<meta name="msapplication-tap-highlight" content="no" /><!-- winphone 点击无高光 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>表单验证</title>
</head>
<body>
<div>*邮箱 <input type="text" name="email"><span id="error_email"></span></div>
<br />
<div>*手机 <input type="text" name="cellphone"><span id="error_cellphone"></span></div>
<br />
<div>
    备注(可不填) <input type="text">
</div>
<br />
<div>*性别 <input type="radio" name="sex" value="0">男<input type="radio" name="sex" value="1">女<span id="error_sex"></span></div>
<br />
<div>*兴趣 <select name="hobby" >
    <option value="">请选择</option>
    <option value="001">篮球</option>
    <option value="002">游戏</option>
</select>
<span id="error_hobby"></span>
</div>
<br />
<div>*菜谱 <input type="checkbox" name="food" value="1">鸡腿<input type="checkbox" name="food" value="2">汉堡<span id="error_food"></span></div>
<br />
<div>
    介绍 <textarea name="introduce"  cols="30" rows="10"></textarea>
    <span id="error_introduce"></span>
</div>



<button id="show_res">执行checkAllStatus方法,检查所有需要检查的表单</button>
<div>结果<span id="res"></span></div>
<button id="show_res_one" title="执行isCheckBoxRadioSelectNull方法,检查单个radio或checkbox或select有没有值,只返回true或false">检查hobby有没有值</button>
<div>结果<span id="res_one"></span></div>

<script src="wsj-form-validate.js" type="text/javascript"></script>
<script>
    config=[
    {
            el:'email',
            handle:"input",
            reg:["email"],
            msg:["邮箱格式不对"],
            success:function(curObj){
             document.getElementById('error_email').innerHTML='格式正确'
            },
            fail:function(curObj,idx){
                /*
                 * curObj:当前整个对象
                 * idx:   当前错误信息的索引
                */
                document.getElementById('error_email').innerHTML=curObj.msg[idx]
            }
        },
        {
            el:'introduce',
            handle:"input",
            reg:["require"],
            msg:["不能为空",],
            success:function(curObj){
             document.getElementById('error_introduce').innerHTML='正确'
            },
            fail:function(curObj,idx){
                /*
                 * curObj:当前整个对象
                 * idx:   当前错误信息的索引
                */
                document.getElementById('error_introduce').innerHTML=curObj.msg[idx]
            }
        },
        {
            el:'cellphone',
            handle:"change",
            reg:["cellphone"],
            msg:["电话格式不对"],
            success:function(curObj){
                document.getElementById('error_cellphone').innerHTML='格式正确'
            },
            fail:function(curObj,idx){
                document.getElementById('error_cellphone').innerHTML=curObj.msg[idx]
            }
        },
        {
            el:'sex',
            msg:["性别必选"],
            success:function(curObj){
                document.getElementById('error_sex').innerHTML='格式正确'
            },
            fail:function(curObj,idx){
                document.getElementById('error_sex').innerHTML=curObj.msg[idx]
            }
        },
        {
            el:'hobby',
            msg:["兴趣必选"],
            success:function(curObj){
                document.getElementById('error_hobby').innerHTML='格式正确'
            },
            fail:function(curObj,idx){
                document.getElementById('error_hobby').innerHTML=curObj.msg[idx]
            }
        },
        {
            el:'food',
            msg:["菜谱必选"],
            success:function(curObj){
                document.getElementById('error_food').innerHTML='格式正确'  
            },
            fail:function(curObj,idx){
                document.getElementById('error_food').innerHTML=curObj.msg[idx]
            }
        }
    ]


var regResult = new WsjFormReg(config)
//自行扩展正则
regResult.reg.cellphone = function (that) {
    return /^(0|86|17951)?(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])[0-9]{8}$/.test(that.value)
}
//检测所有表单元素
document.getElementById('show_res').onclick = function () {
    document.getElementById('res').innerHTML = regResult.checkAllStatus()
}
//检测指定单个表单元素
document.getElementById('show_res_one').onclick = function () {
    document.getElementById('res_one').innerHTML = regResult.isCheckBoxRadioSelectNull('hobby')
}
</script>
</body>
</html>
